<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>回到顶部</title>
	</head>
	<style>
	    #div1{width:1000px;height:3000px;background:green}
		.up {
			display: none; width: 100px; height: 100px; background: red; 
			position: fixed; right: 10px; bottom: 20px;
		}
	</style>
	<script src="base.js"></script>
	<script>
		
		function goTop(){
			var odiv = document.getElementById("top");
			//将滚动距离设置为0，兼容性写法
			document.documentElement.scrollTop = document.body.scrollTop = 0;
		}

		window.onscroll = function(){
			var odiv = document.getElementById("top");
			
			//获取垂直滚动条的滚动距离，兼容性写法
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			
			Base.log(scrollTop);
			if(scrollTop > 2000){	
				odiv.style.display = "block";
			} else {
				odiv.style.display = "none"
			}
			console.log(scrollTop)
		}
	</script>
	<body>
	  <div id="div1"></div>
		<div id="top" class="up" onclick="goTop()" >回到顶部</div>
		
	</body>
</html>
